$btn-bg-color: #5066e1;
$default-btn-bg-color: #fff;

$white: #fff;
$gray: #666;
$fontSize: 28px;
$small-fontSize: 24px;

$small-height: 64px;
$medium-height: 88px;
$large-height: 100px;
$popup-height: 80px;

$small-width: 168px;
$medium-width: 275px;
$large-width: 400px;
$popup-confirm-width: 188px;
$popup-alert-width: 400px;

$small-border-radius: 8px;
$medium-border-radius: 12px;
$large-border-radius: 16px;

$mini-width: 114px;

.btn {
  text-align: center;
  display: inline-block;
  font-size: $fontSize;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.btn-primary {
  background: $btn-bg-color;
  color: $white;
  border: 2px solid $btn-bg-color;
}
.btn-default {
  background: $default-btn-bg-color;
  color: $gray;
  border: 2px solid $gray;
}
.btn-small {
  width: $small-width;
  height: $small-height;
  border-radius: $small-border-radius;
  font-size: $small-fontSize;
}
.btn-medium {
  width: $medium-width;
  height: $medium-height;
  border-radius: $medium-border-radius;
}
.btn-normalWidth {
  width: 184px;
  height: $medium-height;
  border-radius: $medium-border-radius;
}
.btn-large {
  width: $large-width;
  height: $medium-height;
  border-radius: $medium-border-radius;
}
.btn-largeWidth {
  width: 590px;
  height: 88px;
  border-radius: $large-border-radius;
  font-size: $fontSize;
}
.btn-mini {
  width: $mini-width;
  height: $small-height;
  border-radius: $small-border-radius;
  font-size: $small-fontSize;
}
.btn-primary.disabled {
  background: $default-btn-bg-color;
  color: $gray;
}
.btn-medium.popconfirm {
  width: $popup-confirm-width;
  height: $popup-height;
  border-radius: $medium-border-radius;
  color: $gray;
}
.btn-medium.btn-primary.popconfirm {
  width: $popup-confirm-width;
  height: $popup-height;
  border-radius: $medium-border-radius;
  color: $white;
}

.btn-medium.alert {
  width: $popup-alert-width;
  height: $popup-height;
  border-radius: $medium-border-radius;
}
.btn-hollow {
  width: 164px;
  height: 60px;
  line-height: 62px;
  border: 2px solid #5066e1;
  color: #5066e1;
  background: transparent;
  font-size: $small-fontSize;
}
.tip-text {
  color: rgba(255, 255, 255, 0.65);
  font-size: 18px;
  transform: scale(0.9);
  white-space: nowrap;
}
.tip-text.disabled {
  color: rgba(255, 255, 255, 0.4);
}
